<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>丽华快餐-发送现金券</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script src="__CDN__/assets/js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
        <script src="__CDN__/assets/js/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link href="__CDN__/assets/js/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <style>
            body,div {margin: 0; padding: 0;}
            body{padding: 20px;}
            .t{text-align: center;font-size: 30px;}
            .i{
                width: 40%;
                display: flex;
                justify-content: flex-start;
                margin: auto;
                padding: 10px 0;
                align-items: center;
                
                font-size: 16px;
            }
            .i .i1{
                width: 100px;
                color: #888;
                flex-shrink: 0;
            }
            .i .i2{
                flex-grow: 1;
                display: flex;
            }
            .i .i2 .inp{
                flex-grow: 1;
                padding: 5px;
            }
            .i .i2 .btn{
                width: 100%;
                height: 50px;
            }
            .i .i3{
                display: flex;
                align-items: center;
            }
            .i .i3 span{
                margin: 0 10px;
                font-size: 22px;
            }
            .i .i3 .inp{
                flex-shrink: 1;
            }
            .li{
                display: flex;
                flex-direction: column;
            }
            .li .lis{
                flex-grow: 1;
                display: flex;
                align-items: center;
                height: 34px;
                border-top: 1px solid #EEE;
            }
            .li .lis .tt{ color: #999; }
            .li .lis .li1{ width: 10%; }
            .li .lis .li2{ width: 10%; }
            .li .lis .li3{ width: 10%; }
            .li .lis .li4{ width: 10%; }
            .li .lis .li5{ width: 10%; }
            .li .lis .li6{ width: 25%; }
            .li .lis .li7{ width: 25%; }
            .li .lis .liss{ text-align: center;  flex-shrink: 0; padding: 0 6px; }
        </style>
    </head>

    <body id="page-top">
            <div class="t">发送现金抵扣券</div>
            <div class="i">
                <div class="i1">选择城市:</div>
                <div class="i2">
                    <select class="inp" id="city_id" name="city_id">
                        <option value="0" selected>请选择城市</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">常州</option>
                        <option value="4">南京</option>
                        <option value="5">苏州</option>
                        <option value="6">无锡</option>
                        <option value="7">广州</option>
                    </select>
                </div>
            </div>
            <div class="i">
                <div class="i1">手机号:</div>
                <div class="i2"><input type="phone" class="inp" name="mobile" placeholder="请输入用户手机号" /></div>
            </div>
            <div class="i">
                <div class="i1">经办人:</div>
                <div class="i2"><input type="text" class="inp" name="consignee" placeholder="请输入经办人" /></div>
            </div>
            <div class="i">
                <div class="i1">部门信息:</div>
                <div class="i2"><input type="text" class="inp" name="section" placeholder="请输入部门信息" /></div>
            </div>
            <div class="i">
                <div class="i1">份数:</div>
                <div class="i2"><input type="number" class="inp" name="num" placeholder="请输入份数" /></div>
            </div>
            <div class="i">
                <div class="i1">面值:</div>
                <div class="i2"><input type="number" class="inp" name="price" placeholder="请输入现金券面值" /></div>
            </div>
            <div class="i">
                <div class="i1">起始/截止:</div>
                <div class="i2 i3"><input type="text" class="inp" id="start_day" name="start_day" placeholder="请输入现金券起始时间" /> <span>-</span> <input type="text" class="inp" id="end_day" name="end_day" placeholder="请输入现金券截止时间" /></div>
            </div>
            <div class="i">
                <div class="i1">使用类型:</div>
                <div class="i2">
                    <label value="radio" style="margin-right: 10px;">
                        <input name="type" value="0" id="type0" type="radio" checked = 'true'  style="margin-right: 5px;" />
                        <span>不限</span>
                    </label>
                    <label value="radio1" style="margin-right: 10px;">
                        <input name="type" value="1" id="type1" type="radio" style="margin-right: 5px;" />
                        <span>线上</span>
                    </label>
                    <label value="radio2" style="margin-right: 10px;">
                        <input name="type" value="2" id="type2" type="radio" style="margin-right: 5px;" />
                        <span>线下</span>
                    </label>
                </div>
            </div>
            <div class="i">
                <div class="i1">备注:</div>
                <div class="i2"><input type="text" class="inp" name="remark" placeholder="请输入备注信息(一般备注客户抬头加日期)" /></div>
            </div>
            <div class="i">
                <div class="i1"></div>
                <div class="i2">
                    <input type="button" class="btn btn-primary" id="btn" value="确定递交" />
                </div>
            </div>
            <div class="data" id="data"></div>
    </body>

    <!-- 
        $city_id    = (int)$this->request->request('city_id', 0);//城市ID
        $num        = (int)$this->request->request('num', 0); //份数
        $remark     = $this->request->request('remark', ''); //备注信息
        $consignee  = $this->request->request('consignee', ''); //经办人
        $section    = $this->request->request('section', ''); //部门信息
        $mobile     = $this->request->request('mobile', ''); //手机号
        $start_day     = $this->request->request('start_day', ''); //开始有效期
        $end_day     = $this->request->request('end_day', ''); //结束有效期
        $price     = $this->request->request('price', 0); //面值 
    -->

    <script>
        
        

    </script>

    <script type="text/javascript">
        $(function(){
            let submit_ing = false;
            let city_arr = ['', '北京', '上海', '常州', '南京', '苏州', '无锡', '广州'];
            $('#start_day').datetimepicker({
                forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
                language: 'zh-CN',//显示中文
                format: 'yyyy-mm-dd',//显示格式
                minView: "month",//设置只显示到月份
                initialDate: new Date(),//初始化当前日期
                autoclose: true,//选中自动关闭
                todayBtn: true//显示今日按钮
            })
            $('#end_day').datetimepicker({
                forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
                language: 'zh-CN',//显示中文
                format: 'yyyy-mm-dd',//显示格式
                minView: "month",//设置只显示到月份
                initialDate: new Date(),//初始化当前日期
                autoclose: true,//选中自动关闭
                todayBtn: true//显示今日按钮
            })
            $("#btn").click(()=>{

                if(!!submit_ing) return ;
                submit_ing = true;

                console.log("start submit");
                let city_id = $('[name="city_id"]').val();
                let mobile = $('[name="mobile"]').val();
                let consignee = $('[name="consignee"]').val();
                let section = $('[name="section"]').val();
                let num = $('[name="num"]').val();
                let price = $('[name="price"]').val();
                let start_day = $('[name="start_day"]').val();
                let end_day = $('[name="end_day"]').val();
                let remark = $('[name="remark"]').val();
                let type = $('[name="type"]:checked').val();
                
                if(!parseInt(city_id) || !mobile || !num || !price || !start_day || !end_day || !remark){
                    if(!parseInt(city_id)){ alert("请选择城市"); return;}
                    // if(!mobile){ alert("请输入用户手机号"); return;}
                    if(!num) {alert("请输入份数"); return;}
                    if(!price) {alert("请输入现金券面值"); return;}
                    if(!start_day){ alert("请输入现金券起始时间"); return;}
                    if(!end_day) {alert("请输入现金券截止时间"); return;}
                    if(!remark) {alert("请输入备注信息"); return;}
                }

                if(end_day<start_day) {alert("起始时间不能小于截止时间"); return;}

                let payload = {
                    'city_id' : city_id,
                    'mobile' : mobile,
                    'consignee' : consignee,
                    'section' : section,
                    'num' : num,
                    'price' : price,
                    'start_day' : start_day,
                    'end_day' : end_day,
                    'remark' : remark,
                    'type' : type,
                };
                
                $.post("https://newapp.lihua.com/api/index/create_vouchers", payload, (res)=>{
                    alert("充值成功");
                    submit_ing = false;
                    if(res.code==1){
                        //填充数据
                        $innerHtml = "<div class='li'>"
                                        + "<div class='lis'>"
                                        + "<span class='tt liss li1'>城市</span>"
                                        + "<span class='tt liss li2'>经办人</span>"
                                        + "<span class='tt liss li3'>手机号</span>"
                                        + "<span class='tt liss li4'>面值</span>"
                                        + "<span class='tt liss li5'>部门</span>"
                                        + "<span class='tt liss li6'>开始/截止日期</span>"
                                        + "<span class='tt liss li7'>备注</span>"
                                        + "</div>";
                        res.data.map((v, i)=>{
                            $innerHtml = $innerHtml + "<div class='lis'>"
                                + "<span class='liss li1'>"+city_arr[v.city_id]+"</span>"
                                + "<span class='liss li2'>"+v.consignee+"</span>"
                                + "<span class='liss li3'>"+v.mobile+"</span>"
                                + "<span class='liss li4'>"+v.price+"</span>"
                                + "<span class='liss li5'>"+v.section+"</span>"
                                + "<span class='liss li6'>"+v.start_date+" - "+v.end_date+"</span>"
                                + "<span class='liss li7'>"+v.remark+"</span>"
                                + "</div>";
                        })
                        $innerHtml = $innerHtml + "</div>"
                        $("#data").html($innerHtml);
                    }else{
                        alert(res.msg);
                    }
                })


                

            })  
        })
    </script>

</html>